
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.game {
				width: 600px;
				height: 400px;
				background-color: black;
				margin: 50px auto;
			}
			
			.game .cell {
				width: 18px;
				height: 18px;
				margin: 1px;
				float: left;
			}
			/*蛇的组成部分 */
			
			.game .snake {
				background-color: white;
			}
			/*食物*/
			
			.game .food {
				background-color: yellow;
			}
			
			.red{
				background-color: red;
			}
		</style>
	</head>

	<body>

		<div class="game"></div>
		<script type="text/javascript">
			var content = document.getElementsByClassName("game")[0];
			var cells = [];
			var empty = []; //空白数组，记录空白位置
			var snake = [315]; //蛇的数组
			var food = 0; //食物
			var direction = 0;
			// 1.利用js动态添加600个方块进去
			for(var i = 0; i < 600; i++) {
				var c = document.createElement("div");
				c.setAttribute("class", "cell");
				content.appendChild(c);
				empty.push(i);
				cells.push(c);
			}
			// 2.蛇的位置
			for(var i = 0; i < snake.length; i++) {
				cells[snake[i]].setAttribute("class", "cell snake");
				remove(empty, snake[i]);
			}
			// 2.5随机的食物
			getRandomFood();
			// 3.蛇的移动是如何完成的
			function moving() {
				// 左：37  上：38    右：39 下：40
				var next = -1;
				switch(direction) {
					case 37:
						next = snake[0] - 1;
						break;
					case 38:
						next = snake[0] - 30;
						break;
					case 39:
						next = snake[0] + 1;
						break;
					case 40:
						next = snake[0] + 30;
						break;
					default:
						return;
				}
				
				
				// 检查是否碰撞
				
				var res = checkBomp(next);
				if(!res) {
					alert("game over！");
					reStart();
					return;
				}
				// 吃掉食物
				if(next==food){
					snake.unshift(food);
					cells[food].setAttribute("class", "cell snake");
					getRandomFood();
					return;
				}

				cells[next].setAttribute("class", "cell snake");
				cells[snake[snake.length - 1]].setAttribute("class", "cell");

				empty.push(snake[snake.length - 1]);
				remove(empty, next);

				snake.pop();
				snake.unshift(next);
			}
			// 检查是否碰撞
			function checkBomp(next) {
				//装上 上边
				if(next < 0)
					return false;
				//装上 下边
				if(next > 599)
					return false;
				//装上 左边
				if((direction == 37) && (next % 30 == 29))
					return false;
				//装上 右边
				if((direction == 39) && (next % 30 == 0))
					return false;
				// 撞上自己
				for(var i = 0; i < snake.length; i++) {
					if(snake[i] == next)
						return false;
				}
				return true;
			}

			// 随机产生 食物的坐标
			function getRandomFood() {
				var n = Math.floor(Math.random() * empty.length);
				food = empty[n];
				cells[food].setAttribute("class", "cell food");
				remove(empty, food);
			}

			//删除数组指定数字的方法
			function remove(arr, num) {
				for(var i = 0; i < arr.length; i++) {
					if(arr[i] == num) {
						for(j = i; j < (arr.length - 1); j++) {
							arr[j] = arr[j + 1];
						}
						arr.pop();
						return;
					}
				}
			}
			
			// 重启游戏
			function reStart() {
				snake = [315];
				empty = [];
				for(var i = 0; i < 600; i++) {
					cells[i].setAttribute("class", "cell");
					empty.push(i);
				}
				for(var i = 0; i < snake.length; i++) {
					cells[snake[i]].setAttribute("class", "cell snake");
					remove(empty, snake[i]);
				}
				direction = 0;
				getRandomFood();
			}
			setInterval(function() {
				moving();
			}, 1000);
			
			document.getElementsByTagName("body")[0].onkeyup = function(e){
				
				var keyCode = e.keyCode;
				if(snake.length>1){
					// 避免开倒车撞死自己
					if(Math.abs(keyCode-direction)==2)
						return;
				}
				direction = keyCode;
				moving();
			}
			
			
		</script>
	</body>

</html>